<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>留言管理</title>
    <%@include file="../common/common.jsp"%>
</head>

<body style="padding:0;">
<div class="container-fluid" id="root">
    <div class="  col-md-8 col-md-offset-2">
        <h2 class="text-center">留言管理</h2>

        <div class="panel-group" v-for="(msg,index) in msgData">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" :href="'#collapse'+msg.id">
                            <div class="row">
                                <div class="col-md-3">留言人：{{msg.nick_name}}</div>
                                <div class="col-md-5">留言时间：{{msg.curr_time | format}}</div>
                                <div class="col-md-4">是否已回复：<span style="color: red;">{{msg.is_reply | isReply}}</span>
                                </div>
                            </div>
                        </a>
                    </h4>
                </div>
                <div :id="'collapse'+msg.id" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div>
                            {{msg.msg_content}}
                        </div>
                        <hr>
                        <div>
                            <div v-if="msg.reply_msg !=null">
                                <div>回复：</div>
                                <p>{{msg.reply_msg}}</p>
                            </div>
                            <div class="row" v-else>
                                <div class=" col-md-10">
                                    <input type="text" class="form-control" v-model="message" placeholder="50字以内">
                                </div>
                                <div class="col-md-2">
                                    <button type="button" @click="sendMsg(msg.id)" class="btn btn-info">回复</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">
    const modtype = '<%=request.getAttribute("modtype")%>';
    const modid='<%=request.getAttribute("modid")%>';
    var url;

    var app=new Vue({
        el: '#root',
        data() {
            return {
                msgData:[],
                message:""
            }
        },
        methods:{
            async getMsg(){
                if (modtype==="H"){
                    url=CONTEXT_PATH+'/Hotel/loadMsg/'+modid;
                }else if(modtype==="S"){
                    url=CONTEXT_PATH+'/ScenicSpot/loadMsg/'+modid;
                }else {
                    swal("页面初始化错误！");
                    return ;
                }
                const { data: res }=  await axios.get(url);
                this.msgData = res.data;
            },
            async sendMsg(msgId){
                var param={
                    message:this.message,
                    msgId:msgId
                };
                const { data: res }=  await axios.post(CONTEXT_PATH+'/admin/replyMsg',param);
                if(res.code===200){
                    swal("提示！","回复成功！","success")
                }

                if(res.code===402){
                    swal("提示！",res.msg,"warning")
                }
            },
        },
        mounted:function(){
            this.getMsg();
        },
        filters:{
            isReply : function (value) {
                return value==="0" ? "否" : "是";
            },
            format : function(value) {
                var d=new Date(value);
                var fmt="yyyy年MM月dd日 hh时mm分ss秒";
                var o = {
                    'M+': d.getMonth() + 1,// 月份
                    'd+': d.getDate(),// 日
                    'h+': d.getHours(),// 小时
                    'm+': d.getMinutes(),// 分
                    's+': d.getSeconds(),// 秒
                    'q+': Math.floor((d.getMonth() + 3) / 3),// 季度
                    'S': d.getMilliseconds()// 毫秒
                };
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (d.getFullYear() +'')
                        .substr(4 - RegExp.$1.length));
                }
                for (var k in o) {
                    if (new RegExp('('+ k +')').test(fmt)) {
                        fmt = fmt.replace(RegExp.$1,
                            (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k])
                                .substr(('' + o[k]).length)));
                    }
                }
                return fmt;
            },
        }

    });
</script>
</body>

</html>